<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 公司列表 </el-breadcrumb-item>
                <el-breadcrumb-item>{{ isStatus }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="98px">
                    <el-form-item label="会展名称">
                        <el-input v-model="form.exhibitName"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button @click="clearAdd">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import VueCropper from 'vue-cropperjs';
import seleSearch from '../common/sele-search';
//import { getCompany, updateCompany, addCompany } from '../../api/company';
export default {
    name: 'exhibition_add',
    components: {
        VueCropper,
        seleSearch
    },
    data() {
        return {
            qrCode: {
                fileGroup: 'company',
                fileidentName: 'qrCode'
            },
            companyLogo: {
                fileGroup: 'company',
                fileidentName: 'companyLogo'
            },
            companyIntroduceImg: {
                fileGroup: 'company',
                fileidentName: 'companyIntroduceImg'
            },
            companyIntroduceVideo: {
                fileGroup: 'company',
                fileidentName: 'companyIntroduceVideo'
            },
            companyPictureImg: {
                fileGroup: 'company',
                fileidentName: 'companyPictureImg'
            },
            companyProductVideo: {
                fileGroup: 'company',
                fileidentName: 'companyProductVideo'
            },

            form: {
                companyDetailIntro: '',
                exhibitIntroduce: '',
                exhibitName: '',
                companyLogo: '',
                qrCode: '',
                companyIntroduceImg: '',
                companyIntroduceVideo: '',
                companyPictureImg: '',
                companyProductVideo: ''
            },
            getForm: {
                createTime: '2020-10-10',
                endTime: '20:00',
                startTime: '09:00',
                exhibitStatus: 1,
                exhibitImg: '',
            },
            defaultSrc: require('../../assets/img/img.jpg'),
            fileList: [],
            imgSrc: '',
            cropImg: '',
            dialogVisible: false,
            isStatus: '新增公司'
        };
    },
    created() {
        this.cropImg = this.defaultSrc;
        //console.log(this.$route.query.companyId);
        if (this.$route.query.companyId) {
            this.isStatus = '编辑公司';
            getCompany(this.$route.query.companyId).then((res) => {
                console.log('编辑公司',res)
                this.getForm.companyLogo = res.data.data.companyLogo;
                this.getForm.qrCode = res.data.data.companyLogo;
                this.getForm.companyIntroduceImg = res.data.data.companyLogo;
                this.getForm.companyIntroduceVideo = res.data.data.companyLogo;
                this.getForm.companyPictureImg = res.data.data.companyLogo;
                this.getForm.companyProductVideo = res.data.data.companyLogo;
                res.data.data.companyLogo = this.$myUrl.IMGURL + res.data.data.companyLogo;
                res.data.data.qrCode = this.$myUrl.IMGURL + res.data.data.qrCode;
                res.data.data.companyIntroduceImg = this.$myUrl.IMGURL + res.data.data.companyIntroduceImg;
                res.data.data.companyIntroduceVideo = this.$myUrl.IMGURL + res.data.data.companyIntroduceVideo;
                res.data.data.companyPictureImg = this.$myUrl.IMGURL + res.data.data.companyPictureImg;
                res.data.data.companyProductVideo = this.$myUrl.IMGURL + res.data.data.companyProductVideo;
                //console.log(res.data);
                this.form = res.data.data;
            });
        }
    },
    methods: {
        beforeUpload() {},
        companyLogoEvent(res, file) {
            this.getForm.companyLogo = res.data.relativePath;
            this.form.companyLogo = URL.createObjectURL(file.raw);
            //console.log(this.form.companyLogo);
            //console.log(this.form.companyLogo);
            //console.log(this.form.companyLogo);
        },
        qrCodeEvent(res, file) {
            this.getForm.qrCode = res.data.relativePath;
            this.form.qrCode = URL.createObjectURL(file.raw);
        },
        companyIntroduceImgEvent(res, file) {
            this.getForm.companyIntroduceImg = res.data.relativePath;
            this.form.companyIntroduceImg = URL.createObjectURL(file.raw);
        },
        companyIntroduceVideoEvent(res, file) {
            this.getForm.companyIntroduceVideo = res.data.relativePath;
            this.form.companyIntroduceVideo = URL.createObjectURL(file.raw);
        },
        companyPictureImgEvent(res, file) {
            this.getForm.companyPictureImg = res.data.relativePath;
            this.form.companyPictureImg = URL.createObjectURL(file.raw);
        },
        companyProductVideoEvent(res, file) {
            this.getForm.companyProductVideo = res.data.relativePath;
            this.form.companyProductVideo = URL.createObjectURL(file.raw);
        },
        handleAvatarSuccess() {},
        beforeAvatarUpload() {},
        load() {
            // this.count += 2
        },
        onSubmit() {
            if (this.$route.query.companyId) {
                updateCompany({
                    ...this.getForm,
                    id: this.$route.query.companyId,
                    companyName: this.form.companyName,
                    companyIntroduce: this.form.companyIntroduce,
                    companyDetailIntro: this.form.companyDetailIntro,
                    companyIntroduceImg:this.form.companyIntroduceImg
                }).then((res) => {
                    this.$message.success('编辑成功！');
                    this.$router.push({
                        path: '/company-list'
                    });
                });
            } else {
                axios.post(this.$myUrl.BASEURL + 'exhibit/addExhibitCompany?exhibitId=1&companyIdList=2',{
                    //...this.getForm,
                    // exhibitId:1,
                    // companyIdList:3,
                    exhibitName: this.form.exhibitName,
                    //exhibitIntroduce: this.form.exhibitIntroduce,
                }).then((res) => {
                    this.$message.success('新增成功！');
                    this.$router.push({
                        path: '/company-list'
                        
                    });
                    
                });
            }
        },
        clearAdd(){
            this.$router.push({
                path:'/exhibition-management'
            })
        },
        setImage(e) {
            const file = e.target.files[0];
            if (!file.type.includes('image/')) {
                return;
            }
            const reader = new FileReader();
            reader.onload = (event) => {
                this.dialogVisible = true;
                this.imgSrc = event.target.result;
                this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
            };
            reader.readAsDataURL(file);
        },
        cropImage() {
            this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
        },
        cancelCrop() {
            this.dialogVisible = false;
            this.cropImg = this.defaultSrc;
        },
        imageuploaded(res) {
            //console.log(res);
        },
        handleError() {
            this.$notify.error({
                title: '上传失败',
                message: '图片上传接口上传失败'
            });
        }
    }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
}
.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.pre-img {
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo-btn {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>